<template>
  <div>data: {{count}} </div>
  <div>computed: {{doubleCount}}</div>
  <div>vuex: {{userInfo.age}}</div>
  <a-button @click="add">count++</a-button>
  <a-button @click="addVuex">vuex++</a-button>
</template>

<script>
import { ref, computed, watch, getCurrentInstance } from 'vue'
export default {
  /**
   * 生命周期
   * created beforeCreate -> setup
   * beforMount -> onBeforeMount
   * mounted -> onMounted
   * beforeUpdate -> onBeforeUpdate
   * updated -> onUpdated
   * beforeDestroy -> onBeforeUnmount
   * destroyed -> onUnmounted
   * errorCaptured -> onErrorCaptured
   * 
   */

  // 初始化状态
  setup() {
    // 定义data
    const count = ref(0)

    // 定义方法
    const add = () => {
      count.value++
    }

    // watch 第一个参数定义监听的值，第二个参数为回调
    watch(() => count.value, val => {
      console.log(`count is ${val}`)
    })

    // 计算属性
    const doubleCount = computed(() => count.value * 2)

    // 获取上下文属性
    const { ctx } = getCurrentInstance()
    // 获取路由
    console.log(ctx.$store.state.userInfo, ctx.$router.currentRoute.value);

    // 获取vuex
    const userInfo = computed(() => ctx.$store.state.userInfo)
    const addVuex = () => {
      ctx.$store.commit('setUserAge', ++userInfo.value.age)
    }

    // 获取挂载在全局的属性 app.config.globalProperties.$md5 = 'md5'
    console.log(ctx.$md5);

    // 导出
    return {
      count,
      doubleCount,
      userInfo,
      add,
      addVuex
    }
  }
}
</script>

<style>
</style>